<template>
  <view class="page">
    <!-- topbar start -->
    <view class="cu-custom bg-white solid-bottom" :style="[{ height: CustomBar + 'px' }]">
      <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="action" @click="back"><text class="cuIcon-back fu-fs36"></text></view>
        <!-- #ifdef H5 -->
        <view class="fu-fs32 text-333">{{i18n['我的足迹']}}</view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="fu-fs32">{{i18n['我的足迹']}}</view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view v-if="len > 0" class="action text-lg" @click="showSelect">{{ edit }}</view>
        <view v-else class="action"></view>
        <!-- #endif -->
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="sticky-bar" :style="{top: CustomBar+'px'}" v-if="len > 0">
      <view  class="action text-lg" @click="showSelect">{{ edit }}</view>
    </view>
    <!-- #endif -->
    <!-- topbar end -->
    <!-- 数据加载状态 start -->
    <fu-loading v-if="isInit"></fu-loading>
    <!-- 数据加载状态 end -->
    <!-- 收藏数据 start-->
    <view class="content" v-else>
      <!-- 列表 start -->
      <block v-if="!isInit">
        <block v-for="(item, index) in listData" :key="index" >
          <view class="footprint-data text-666 flex justify-start align-center" @click.stop="dataChange(index)">
            <block v-if="showDel == 1">
              <text v-if="selectId[index].length != listData[index].length" class="fu-iconfont select-dot margin-right-xs text-999">&#xe867;</text>
              <text v-if="selectId[index].length == listData[index].length" class="fu-iconfont act select-dot  margin-right-xs">&#xe65b;</text>
            </block>
            <text>{{ index }}</text>
          </view>
          <view class="footprint-wrap grid col-3  ">
            <view class="footprint-item-wrap" v-for="(oItem, oIndex) in item" :key="oIndex" @click="navToDetail(oItem)">
              <view class="footprint-item">
                <view class="mask" v-if="showDel == 1"></view>
                <view v-if="showDel == 1" class="footprint-item-select" @click.stop="checkChange(oItem.isSelect, oItem.aid, index, oIndex)">
                  <text v-if="!oItem.isSelect" class="fu-iconfont select-dot text-999">&#xe867;</text>
                  <text v-if="oItem.isSelect" class="fu-iconfont act select-dot">&#xe65b;</text>
                </view>
              <!--  <view class="footprint-item-image">
                  <image :src="oItem.collect_img" mode="aspectFill"></image>
                  </view> -->
                  <view class="footprint-item-image" @click.stop="navToDetail(oItem)">
                    <view class="image">
                      <fu-image mode="aspectFill"  :src="oItem.collect_img"></fu-image>
                    </view>
                  </view>
                <view class="text-cut text-sm text-title">{{ oItem.collect_title }}</view>
                <view class="text-lg footprint-item-color text-prices">
                  <text class="text-xs">￥</text>
                  <text class="text-bold">{{ oItem.shop_price | formatNumber }}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </block>
      <!-- 列表 end -->

      <!-- 编辑 start -->
      <view class="footer-wrap " v-if="len > 0" v-show="showDel == 1">
        <view class="footer flex justify-between align-center">
          <view @click="selectAll" class="flex justify-start align-center">
            <text v-if="len != num" class="fu-iconfont select-dot text-999">&#xe867;</text>
            <text v-if="len == num" class="fu-iconfont act select-dot">&#xe65b;</text>
            <text class="margin-left-xs">{{ selectAllFont }}</text>
          </view>
          <view><button type="mini-btn" class="btn-bg" plain="true" @click="del()">{{i18n['删除']}}</button></view>
        </view>
      </view>
      <!-- 编辑 end -->
    </view>
    <!-- 收藏数据 end -->
    <!-- 空数据 start -->
    <fu-empty-ui emptyImage="collection" v-if="len == 0 && !isInit"></fu-empty-ui>
    <!-- 空数据 end -->
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar, // 标题栏高度
      CustomBar: this.CustomBar, // 状态栏高度
      listData: [], //我的收藏列表
      showDel: 0, //编辑状态显示 0不显示 1 显示
      selectId: {}, // 当前选中的商品
      edit: global.i18n['编辑'], //编辑状态显示时编辑值
      isInit: false, //初始化
      selectAllFont: global.i18n['全选'], // 全选按钮显示文字
      isSelectAll: false, // 是否全选

    };
  },
  computed: {
    len() {
      let num = 0;
      for (let attr in this.listData) {
        this.listData[attr].forEach(val => {
          num++;
        });
      }
      return num;
    },
     num() {
       let number = 0;
       for (let attr in this.selectId) {
         this.selectId[attr].forEach(val => {
           number++;
         });
       }
       return number;
     }
  },
  methods: {
    /**
     * @description 返回上一页
     */
    back() {
      uni.navigateBack();
    },

    /**
     * @description 编辑事件
     */
    showSelect() {
      this.showDel = this.showDel == 1 ? 0 : 1;
      this.edit = this.showDel == 1 ? this.i18n['完成'] : this.i18n['编辑'];
    },
    /**
     * @description 选中事件
     * @param {Object} isSelect 事件源选中与否
     * @param {Object} id 事件源id
     * @param {Object} index 事件源下标
     */
    checkChange(isSelect, id, index, oIndex) {
      // console.log(isSelect, id, index, oIndex);
      // 判断是否被选中  未选中id加入选中数组  已选中id从数组中删除选中
      if (!isSelect) {
        this.selectId[index].push(id);
      } else {
        let i = this.selectId[index].findIndex(item=>item == id);
        this.selectId[index].splice(i, 1);
      }
      // console.log(this.len , this.num);
      // 判断数据是否已经全部选中  数据已经全部选中 全部选中按钮变色 同时改为取消全选
      if (this.len == this.num) {
        this.selectAllFont = this.i18n['取消全选'];
        this.isSelectAll = true;
      } else {
        this.selectAllFont = this.i18n['全选'];
        this.isSelectAll = false;
      }
      // 改变数据选中状态
      this.$set(this.listData[index][oIndex], 'isSelect', !isSelect);
      // console.log('选中事件',this.len , this.num,this.selectId)

    },
    /**
     * @description 点击去详情事件
     * @param {Object} item 入参 事件源的信息
     */
    navToDetail(item) {
      // 在编辑装填不能跳转
      if (this.showDel == 1) return;
      // 跳转商品详情
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          goods_id: item.collect_id, //商品id
          sku_id: item.sku_id //商品规格sku_id
        }
      });
    },
    /**
     * @description 取消编辑事件
     */
    cancle() {
      this.showDel = 0;
    },
    /**
     * @description 获取足迹数据
     * @param {Boolen} isPull 是否刷新
     * @param {Number} type 1不带搜索  2带时间搜索 3 带时间段搜索 type == 2 time type ==3 start_time  end_time
     */
    getData(isPull) {
      if (!isPull) {
        this.isInit = true;
      }
      this.$api
        .post(global.apiUrls.postFootprint, { type: 1 })
        .then(res => {
          if (res.data.code == 1) {
            let list = res.data.data;
            let obj = {};
            for (let attr in list) {
              obj[attr] = [];
              list[attr].forEach(val => {
                this.$set(val, 'isSelect', false);
                // val.isSelect = false;
              });
            }
            this.selectId = obj;
            this.listData = list;
          } else {
            this.$message.info(res.data.msg);
          }
          if (!isPull) {
            this.isInit = false;
          }
          if (isPull) {
            uni.stopPullDownRefresh();
          }
        })
        .catch(err => {
          console.error(err);
          if (!isPull) {
            this.isInit = false;
          }
          if (isPull) {
            uni.stopPullDownRefresh();
          }
        });
    },
    /**
     * @description 删除事件
     */
    del() {
      var that = this;
      // 无选中时不能删除
      if (this.num == 0) {
        this.$message.info(this.i18n['请选择要删除的商品']);
        return;
      }
      let arr = [];
      for (let attr in this.selectId) {
        this.selectId[attr].forEach(val => {
          arr.push(val);
        });
      }
      // return;
      // 根据选中id调用接口删除收藏
      this.$api
        .post(global.apiUrls.PostUserAddonsCancelCollection, {
          aid: arr.join(','),
          type: 3
        })
        .then(res => {
          var res = res.data;
          if (res.code == 1) {
            // 删除成功提示
            this.$message.info(this.i18n['删除成功']);
            // this.num = 0
            this.getData();
            // 删除后状态回归
            this.isSelectAll = false;
            this.selectId = {};
            this.showDel = 0;//编辑状态显示 0不显示 1 显示
            this.edit = this.i18n['编辑']; //编辑状态显示时编辑值
            this.selectAllFont = this.i18n['全选']; // 全选按钮显示文字
            // 删除成功刷新数据
          } else {
            // 删除失败提示
            this.$message.info(res.msg);
          }
        });
    },
    /**
     * @description 同一日期下全选  全不选
     */
    dataChange(index) {
      let len = this.listData[index].length;
      let num = this.selectId[index].length;
      let select = this.selectId[index];
      let list = this.listData[index];
      // 已全部选中
      if (len == num) {
        select = [];
        list.forEach(val => {
          val.isSelect = false;
        });
      } else {
        select = [];
        this.listData[index].forEach(val => {
          this.$set(val, 'isSelect', true);
          select.push(val.aid);
        });
      }
      this.$set(this.selectId, index, select);
      this.$set(this.listData, index, list);
      // this.num = this.selectId[index].length;
      // 判断数据是否已经全部选中  数据已经全部选中 全部选中按钮变色 同时改为取消全选
      if (this.len == this.num) {
        this.selectAllFont = this.i18n['取消全选'];
        this.isSelectAll = true;
      } else {
        this.selectAllFont = this.i18n['全选'];
        this.isSelectAll = false;
      }
      // console.log('同一日期下全选  全不选',this.len , this.num,this.selectId,this.listData)
    },
    /**
     * @description 全选 全不选事件
     */
    selectAll() {
      // 判断是否全选  若已全选则清空已选中id  反正全部选中
      if (!this.isSelectAll) {
        // this.selectId = {};
        this.selectAllFont = this.i18n['取消全选'];
        for (let attr in this.listData) {
          this.selectId[attr] = [];
          this.listData[attr].forEach(val => {
            val.isSelect = true;
            this.selectId[attr].push(val.aid);
          });
        }
        // this.num = arr;
        this.isSelectAll = true;
      } else {
        // this.selectId = {};
        this.selectAllFont = this.i18n['全选'];
        for (let attr in this.listData) {
          this.selectId[attr] = [];
          this.listData[attr].forEach(val => {
            val.isSelect = false;
          });
        }
        // this.num = 0;
        this.isSelectAll = false;
      }
    }
  },
  onLoad() {
    this.getData();
  },
  onShow() {},
  onReachBottom() {},
  onPullDownRefresh() {
    this.selectId = {};
    // this.num = 0;
    this.showDel = 0;//编辑状态显示 0不显示 1 显示
    this.edit = this.i18n['编辑']; //编辑状态显示时编辑值
    this.selectAllFont = this.i18n['全选']; // 全选按钮显示文字
    this.isSelectAll = false; // 是否全选
    this.getData(true);
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  min-height: 100vh;
}

.text-cut-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-through {
  text-decoration: line-through;
}
.text-333 {
  color: #333333;
}
.text-999 {
  color: #999999;
}
.sticky-bar{
  position: sticky;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 32rpx;
  background-color: #F8F8F8;
  z-index: 99;
}
.fu-fs32{
  position:absolute;
  left: 50%;
  transform:translateX(-50%);
}
// 主体 start
.content {
  padding: 0 24upx;
  .notData {
    padding-top: 200upx;
  }
  .check {
    display: inline-block;
    width: 60upx;
    height: 220upx;
    padding-top: 80upx;
    text {
      display: inline-block;
      vertical-align: top;
      font-size: 40upx;
      margin-right: 10upx;
      color: #999;
      &.act {
        color: $fu-main-color;
      }
    }
  }
  // 列表 start
  .act {
    color: $theme;
  }
  // 列表 end
  // 选中样式 start
  .item-active {
    label {
      line-height: 160upx;
      padding-top: 30upx;
    }
    .article {
      width: 370upx;
    }
  }
  // 选中样式 end
  // 按钮 start
  .btn-box {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 100upx;
    padding: 30upx 40upx 0;
    z-index: 100;
    button {
      border: 1px solid #999;
      color: #666;
      width: auto;
      padding: 0 40upx;
      font-size: 28upx;
      border-radius: 40upx;
      float: right;
      margin-right: 20upx;
      height: auto;
      line-height: 1.9;
    }
  }
  // 按钮 end
  .edit {
    text-align: right;
    padding: 20upx 20upx;
    font-size: 28upx;
    .select-tip {
      float: left;
    }
  }
}
// 主体 end

// 选中radio样式 start
.select-dot {
  font-size: 36rpx !important;
}
// 选中radio样式 end
// 足迹列表 start
.footprint-data {
  height: 60rpx;
  .act {
    color: $theme;
  }
}
.footprint-wrap {
  .footprint-item-wrap {
    padding: 0 6rpx 20rpx;
    box-sizing: border-box;
  }
  .footprint-item {
    position: relative;
    .mask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      // background: rgba(0, 0, 0, 0.2);
      z-index: 11;
    }
    .footprint-item-select {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 34rpx;
      height: 34rpx;
      line-height: 34rpx;
      border-radius: 50%;
      text-align: right;
      color: #ffffff;
      background: #ffffff;
      z-index: 12;
      .act {
        color: $theme;
      }
    }

    .footprint-item-image {
      width: 100%;
      padding-bottom: 100%;
      position: relative;
      overflow: hidden;
      .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .text-title {
      width: 100%;
      margin: 20rpx 0 8rpx;
    }
    .footprint-item-color {
      margin-bottom: 26rpx;
    }
  }
}

// 足迹列表 end
// 足迹编辑 start
.footer-wrap {
  width: 750rpx;
  // height: 100rpx;
  background: #ffffff;
  opacity: 1;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer {
    height: 100rpx;
    padding: 0rpx 24rpx;
    box-sizing: border-box;
  }
  &::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #eeeeee;
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleY(0.5);
  }
  .btn-bg {
    border: none;
    width: 200rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: $bgtheme;
    opacity: 1;
    border-radius: 36rpx;
    color: #ffffff;
    font-size: 28rpx;
  }
}
// 足迹编辑 end
.solid-bottom::after{
  z-index:9999;
}
</style>
